Image viewer using bootstrap carousel

Hi everyone in this article I’m explaining about image viewer using bootstrap carousel.

This article shows use of bootstrap to create Image galery in your site or blog. This is very useful if you have large images that will otherwise take up too much space. The bootstrap framework has undoubtedly made the responsive programmers easier and made it possible for non-experts to do fancy stuff themselves. With bootstrap, we can do a lot of really advanced and dynamic things by writing just a few class name. Since its arrival, bootstrap has revolutionized the way we do a great variety of web designing and developing tasks. With bootstrap, we can create advanced photo gallery and slideshow.

As we all know, effects would probably be useful for e-commerce sites, but I don't see any reason why you can't use it for any other sites. The basic idea is to have the image "zoom" forward & show an approximately 25% larger version of the image. So let's get on with it.

Description:

In this post, we have make image gallery with example, Image viewers such as sliders, carousels, galleries, magnify and zoom. Image viewers for sliders, carousels, galleries, magnify (image pops up larger) and zoom (lens moves around image showing a close up of that bit).

When we click on the image a magnifying glass appears alongside the image which automatically scales to show the selected region. In that effect, the grainy, scaled-up image was then replaced with a hi-resolution version of the selected region. It's great to use on product images, photos, or other images with lots of details you want users to be able to get into on command. Now it's time to see how we will make it.

Step 1: First we have to create a web application

Open visual studio >> File Project>> Select ASP.NET MVC 4 Web Application

Give the application name and click ok

On clicking OK a window like this will pop up on your screen.

In that window from Project Templates you have several options like:

1. Empty

(Simply a blank view)

2. Basic

(Contains a few options and a few folders)

3. Internet Template

(Contains all the folders for global use)

4. Intranet Template

(Contains all the folders but for a specific scenario)

5. Mobile Application

(For mobile app dev)

6. Web API

(Extra features of Razor, Routing and others)

7. Single Page Application

(For single page app dev)

8. Facebook Application

(Facebook app dev)

From those select Empty and then from View Engine select Razor Engine View (it's

the default actually).

Download these latest bootstrap file and latest jquery file

<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>

<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>

<scriptsrc="~/Scripts/bootstrap/js/bootstrap.min.js"></script>

Step 2: Add Home Controller

Step 3: Add index view page

Then after we have design for show image gallery

index.cshtml:

@{
    ViewBag.Title = "Index";
}
 
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<scriptsrc="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
<scriptsrc="~/Scripts/app.js"></script>
<br/>
<br/>
<br/>
<divclass="container">
    <divclass="panel panel-Primary">
        <divclass="panel-heading">
            <h3class="panel-title">Photos</h3>
        </div>
        <divclass="panel-body">
            <divclass="row">
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/mindstick-1.jpg"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Output:

If you want to show image like image viewer and show next image on click next or

Then you add bootstrap model popup and set all image in bootstrap model popup

and open modelpoup on click image

index.cshtml:

@{
    ViewBag.Title = "Index";
}
 
<linkhref="~/Content/bootstrap/css/bootstrap.min.css"rel="stylesheet"/>
<scriptsrc="~/Scripts/jquery-2.1.1.min.js"></script>
<scriptsrc="~/Scripts/bootstrap/js/bootstrap.min.js"></script>
<scriptsrc="~/Scripts/app.js"></script>
<br/>
<br/>
<br/>
<divclass="container">
    <divclass="panel panel-Primary">
        <divclass="panel-heading">
            <h3class="panel-title">Photos</h3>
        </div>
        <divclass="panel-body">
            <divclass="row">
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Camel.jpg"name="1"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Dog.jpeg"name="2"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Giraffe.jpg"name="3"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Liger.jpg"name="4"/>
                    </a>
                </div>
            </div>
            <divclass="row">
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Polar_Bear.jpg"name="5"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Saint_Bernard.jpg"name="6"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Siberian_Tiger.jpg"name="7"/>
                    </a>
                </div>
                <divclass="col-md-3">
                    <ahref="#"class="thumbnail">
                        <imgsrc="~/Images/Zebra.jpg"name="8"/>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<divclass="modal fade"id="myModal"tabindex="-1"role="dialog"aria-labelledby="myModalLabel"aria-hidden="true">
    <divclass="modal-dialog">
        <divclass="modal-content">
            <divclass="modal-header">
                <buttontype="button"class="close"data-dismiss="modal"aria-label="Close"><spanaria-hidden="true">&times;</span></button>
            </div>
            <divclass="modal-body">
                <divid="myCarousel"class="carousel slide">
                    <divclass="carousel-inner">
                        <divclass="item ">
                            <imgsrc="/Images/Camel.jpg"style="height:400px;"name="1"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Dog.jpeg"style="height:400px;"name="2"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Giraffe.jpg"style="height:400px;"name="3"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Liger.jpg"style="height:400px;"name="4"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Polar_Bear.jpg"style="height:400px;"name="5"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Saint_Bernard.jpg"style="height:400px;"name="6"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Siberian_Tiger.jpg"style="height:400px;"name="7"class="img-responsive">
                        </div>
                        <divclass="item">
                            <imgsrc="/Images/Zebra.jpg"style="height:400px;"name="8"class="img-responsive">
                        </div>
                    </div>
                    <!-- Controls -->
                    <aclass="left carousel-control"href="#myCarousel"data-slide="prev">
                        <spanclass="icon-prev"></span>
                    </a>
                    <aclass="right carousel-control"href="#myCarousel"data-slide="next">
                        <spanclass="icon-next"></span>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

App.js:

$(document).ready(function () {
    $('.thumbnail').click(function () {
        var name = $(this).find('img').attr('src');
        var mname = $('.carousel-inner').find("img[src='" + $(this).find('img').attr('src') + "']");
        $('.carousel-inner div').removeClass("active");
        $(mname).parent().addClass("active");
        $('#myModal').modal({
            backdrop: 'static',
        }, 'show');
    });
 
 
    $(function () {
        $("#myCarousel").carousel({
            interval: 5000
        });
    });
});

Output:

my previous post i'll explain about Working with SimpleMembership in ASP.NET MVC

articles

Image viewer using bootstrap carousel

Anonymous User

Leave Comment

Comments

Liked By